<script setup lang="ts">
import APICommon from '@/api/common'
import { ElMessageBox, ElMessage, ElLoading } from 'element-plus'
import { copyToClipboard } from '@/utils/index'

const $route = useRoute()

watch($route, (newValue) => {
    if (newValue.params.id) {
        getDetails()
    }
}, { immediate: true })

const details = ref<any>({})

function getDetails() {
    APICommon.getActivityDeail($route.params.id).then(({ data }) => {
        details.value = data
    })
}

function handleTransmit() {
    ElMessageBox.confirm(
        '是否复制当前活动链接？',
        '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
    }).then(() => {
        copyToClipboard(`${import.meta.env.VITE_APP_WEB_URL}/activity-details/${$route.params.id}`)
        return APICommon.setActivityForward($route.params.id)
    }).catch(() => {
        ElMessage.info('已取消')
    })
}

</script>

<template>
    <div class="activity-details">
        <div class="title">湖南心安元素数字科技有限公司</div>
        <div class="number">
            <div class="number-left">
                <div class="item">
                    <div class="label">浏览量：</div>
                    <div class="value">{{ details.hot || 0 }}</div>
                </div>
                <div class="item">
                    <el-icon :size="16" style="margin-top: -2px;cursor: pointer;margin-right: 5px;" color="#898989"
                        @click="handleTransmit">
                        <svg t="1726192187625" class="icon" viewBox="0 0 1024 1024" version="1.1"
                            xmlns="http://www.w3.org/2000/svg" p-id="4264" width="300" height="300">
                            <path
                                d="M965.930667 562.197333L603.626667 882.688c-30.784 29.397333-80.896 6.912-80.896-36.352v-161.450667a516.224 516.224 0 0 0-36.821334-1.386666c-165.973333 0-310.570667 77.696-386.56 192.917333-15.658667 23.530667-51.136 14.549333-54.165333-13.845333A423.722667 423.722667 0 0 1 42.666667 816.213333c0-241.706667 208.341333-441.749333 480.234666-477.034666V177.664c0-43.264 50.133333-65.749333 80.896-36.352l362.304 348.394667c20.330667 19.370667 20.330667 52.949333-0.170666 72.490666z"
                                p-id="4265"></path>
                        </svg>
                    </el-icon>
                    <div class="label">转发：</div>
                    <div class="value">{{ details.forward_num || 0 }}</div>
                </div>
                <div class="item">
                    <div class="label">分类：公司平台</div>
                </div>
            </div>
            <div class="number-right">
                <div class="label">发布时间：</div>
                <div class="value">{{ details.create_time }}</div>
            </div>
        </div>
        <div v-html="details.content"></div>
        <img class="image" v-if="details.image" :src="details.image" alt="image">
    </div>
</template>

<style lang="scss" scoped>
.activity-details {
    overflow: hidden;
    width: 1220px;
    margin: 0 auto;

    .image {
        width: 180px;
        height: 120px;
        object-fit: cover;
        margin: 50px 0;
    }

    .number {
        display: flex;
        justify-content: space-between;
        border-bottom: 1px dotted #BBBBBB;
        padding-bottom: 8px;

        .number-right {
            display: flex;

            .value {
                color: rgba(56, 148, 255, 1);
                font-size: 14px;
            }

            .label {
                color: rgba(136, 136, 136, 1);
                font-size: 14px;
            }
        }

        .number-left {
            display: flex;
            gap: 0 50px;

            .item {
                display: flex;
                align-items: center;

                .value {
                    color: rgba(56, 148, 255, 1);
                    font-size: 14px;
                }

                .label {
                    color: rgba(136, 136, 136, 1);
                    font-size: 14px;
                }
            }
        }
    }

    .title {
        color: rgba(16, 16, 16, 1);
        font-size: 20px;
        text-align: center;
        margin: 30px 0;
        font-weight: 700;
    }

}
</style>
